<template>
  <div>
    <TopNav title="地图找房"></TopNav>
    <baidu-map :center="this.center" class="map" ak="ob8G2QPWHOAqtUfiimjG3Vh3CGN7wu9z" :zoom="zoom">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <!-- <bm-overlay pane="labelPane" :class="{ sample: true }" @draw="draw">
          <div class="sample">
            <p>太原</p>
            <p>99套</p>
          </div>
        </bm-overlay> -->
      <div v-for="(item, index) in mapArr" :key="index" @click="setValue(this.item.coord, this.item.value)">
        <MyOverlay :index="index" :item="item"></MyOverlay>
      </div>
    </baidu-map>
  </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue'
import MyOverlay from '@/components/MyOverlay.vue'
import { getMapHousing, getCityData } from '@/api/article'
export default {
  components: {
    TopNav,
    MyOverlay
  },
  data () {
    return {
      mapArr: [],
      zoom: 11
    }
  },
  comments: {
  },
  methods: {
    async setValue (coord, value) {
      console.log(1)
      this.zoom++
      this.center = { lng: coord.longitude, lat: coord.latitude }
      const { body } = await getMapHousing({ id: value })
      console.log(body)
    }
  },
  computed: {
    center () {
      return localStorage.getItem('current') ? localStorage.getItem('current') : '北京'
    }
  },
  async created () {
    const { body: bodyCity } = await getCityData({ name: this.center })
    const { body: bodyMap } = await getMapHousing({ id: bodyCity.value })
    this.mapArr = bodyMap
    console.log(this.mapArr)
  }
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 620px;
}

// .sample {
//   width: 70px;
//   height: 70px;
//   border-radius: 100%;
//   line-height: 1;
//   font-size: 14px;
//   background: RGB(35, 187, 120) !important;
//   color: #fff;
//   border: #fff 1px solid;
//   text-align: center;
//   position: absolute;
// }
</style>
